<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/handerAndFooter.css">
    <link rel="stylesheet" type="text/css" href="css/vip.css">
    <style>
    </style>
</head>
<body>
<!--***************头部********************-->
<div>
    <el-container>
        <el-header style="padding: 0;height:auto ">
            <div id="header-navbar"> 地平线8号 尽管出发 创造不凡</div>
            <!--        ************************************-->

            <div class="header222" style="overflow:hidden;margin: 0 auto;padding-top:15px;width: 80%">
                <div style=" width:20%;float: left;overflow:hidden; padding-top: 30px">
                    <img src="./images/logo.png" alt=""
                         style="float: left;margin-left:40px;padding-bottom:15px;width: 120px">
                </div>
                <div style="float: left ;
                     vertical-align: bottom;
                      width: 50%;
                     padding-left: 20px">
                    <el-menu :default-active="activeIndex"
                             text-color="#000"
                             mode="horizontal"
                             @select="handleSelect"
                             active-text-color="#ffd04b">

                        <el-menu-item style="font-size: 12px;width: 15%;text-align: center" index="1">商城</el-menu-item>
                        <el-menu-item style="font-size: 12px;width: 15%;text-align: center" index="2">周边</el-menu-item>
                        <el-menu-item style="font-size: 12px;width: 15%;text-align: center" index="3">MEDIA
                        </el-menu-item>
                        <el-menu-item style="font-size: 12px;width: 15%;text-align: center" index="7">品牌</el-menu-item>
                        <el-menu-item style="font-size: 12px;width: 15%;text-align: center" index="5">服务</el-menu-item>
                        <el-menu-item style="font-size: 12px;width: 15%;text-align: center" index="6">会员中心
                        </el-menu-item>
                        <!--        <el-menu-item index="3" disabled>消息中心</el-menu-item>-->
                    </el-menu>
                    <div class="line" style=""></div>
                </div>

            </div>

        </el-header>
        <el-main>
            <!-- banner -->
            <div class="service-banner">
                <img src="./images/service/s-1.png"/>
            </div>
            <div class="questions">
                <!-- icon -->
                <div class="choose-content">
                    <div class="service-tab" @click="vipclick(1)">
                        <div><img :src="equities"/></div>
                        <div>常见问题</div>
                    </div>
                    <div class="service-tab" @click="vipclick(2)">
                        <div><img :src="grade"/></div>
                        <div>售后政策</div>
                    </div>
                    <div class="service-tab" @click="vipclick(3)">
                        <div><img :src="demotion"/></div>
                        <div>联系我们</div>
                    </div>
                </div>
                <!-- title -->
                <div class="service-title" :style="show1">常见问题  / Q & A&nbsp;&nbsp;<span>/ Member Benefits</span></div>
                <div class="service-title" :style="show2">售后政策  / Aftermarket
                    &nbsp;&nbsp;<span>/ Member Benefits</span></div>
                <div class="service-title" :style="show3">联系我们  / Contact us
                    &nbsp;&nbsp;<span>/ Member Benefits</span></div>
                <!-- content -->
                <!-- 常见问题 -->
                <el-collapse v-model="activeName" accordion :style="show1">
                    <el-collapse-item title="Q : 我如何在LEVEL8 官网上购买商品？" name="1" class="answer">
                        <div>A : 您可以直接菜单栏进入商城页面进行选购。下单前需要您登陆个人账号，可使用手机号登陆或微信扫码登陆。</div>
                       </el-collapse-item>
                    <el-collapse-item title="Q : 我想退货/换货怎么办？" name="2" class="answer">
                        <div>A : 我们支持七天无理由退换货。如需退换货，可联系LEVEL8官方商城在线客服，或拨打售后客服热线：400-0088-309，按照客服人员指示办理业务。
                            用户须保证退货商品保持原有品质和功能、外观完好、商品本身及配件的商标和各种标识完整齐全，如有赠品需一并退回。如果商品出现人为损坏、包装箱缺失、零配件缺失的情况，不予办理退货。
                            质量问题退换货由我们承担运费，并安排上门取件；如非质量问题，由用户承担退换货运费。</div>
                      </el-collapse-item>
                    <el-collapse-item title="Q : 我收到了错误的商品（款式、尺寸、颜色不对）怎么办？" name="3" class="answer">
                        <div>A : 用户收到商品，与完成的订单进行对比后，发现商品的款式、尺寸、颜色等与自己订购的商品不一致，请立即联系LEVEL8官方商城在线客服，或拨打售后客服热线：400-0088-309，按照客服人员指示办理退换货。该种情况下，退换货运费皆有我们承担。</div>
                    </el-collapse-item>
                    <el-collapse-item title="Q : 我收到了商品，打开包装发现商品已经损坏了怎么办？" name="4" class="answer">
                        <div>A : 郑重提醒，用户在签收商品包裹时（特别是拉杆箱），一定要与快递员当面验货，如有问题，当场拒收。如遇特殊情况，无法当场验货，请用手机先将未开封的包装箱拍下，特别是箱子上有明显凹陷、破损的部位（方便我们判断是否为物流方的责任，以寻求赔偿）。打开包装之后，如果发现商品已经损坏（比如箱面凹陷、破损等），请立即联系LEVEL8官方商城在线客服，或拨打售后客服热线：400-0088-309，按照客服人员指示办理退换货。</div>
                    </el-collapse-item>
                    <el-collapse-item title="Q : 为什么箱子的密码锁有钥匙孔没配钥匙呢？" name="5" class="answer">
                        <div>A : 箱子使用的是国际通用的TSA海关密码锁，只有海关人员配备钥匙，以备有必要时可直接开启您的旅行箱进行检查，不必强行撬开箱子，可以使您的箱子得到更好的保护。</div>
                    </el-collapse-item>
                    <el-collapse-item title="Q : 为什么拉杆会晃？" name="6" class="answer">
                        <div>A : 箱子使用的是国际通用的TSA海关密码锁，只有海关人员配备钥匙，以备有必要时可直接开启您的旅行箱进行检查，不必强行撬开箱子，可以使您的箱子得到更好的保护。</div>
                    </el-collapse-item>

                </el-collapse>

                <el-collapse v-model="activeName" accordion :style="show2">
                    <div >
                        <div class="after-title">全球售后服务热线：400-0088-309</div>
                        <div class="after-title">全球售后服务邮箱：level8@level8cases.com</div>
                        <div class="after-title" style="margin-bottom: 3.3vw;">工作时间：周一至周五 8：30-18：00</div>
                        <div class="after-block">
                            <div class="after-title">一、保修期限及注意事项</div>
                            <div class="aftet-text">1、拉杆箱保修期限为 2 年；</div>
                            <div class="aftet-text">2、背包产品保修期限为 1 年；</div>
                            <div class="aftet-text">3、配件类产品（如洗漱袋、衣物收纳袋、数据收纳包等）质保期限为 7 天，如有质量问题，只换不修；</div>
                            <div class="aftet-text">4、请您务必保留以下相关票证（有效保修凭证），以便在申请保修时使用：</div>
                            <div class="aftet-text">A. 产品发票   &nbsp;&nbsp;&nbsp;  B. 产品吊牌（附有条形码）</div>
                        </div>
                        <div class="after-block">
                            <div class="after-title">二、保修范围</div>
                            <div class="aftet-text">自产品售出之日起，在正常使用的情况下出现的产品故障，比如：软包出现脱线、扣具损坏、拉链损坏等问题；拉杆箱出现轮子破裂（除正常磨损外）、提手断裂、支脚断裂、拉杆不能伸缩、密码锁失灵、拉链片脱离；以及螺丝松动、缝纫开线、内里脱胶、四合扣脱离等问题，皆属于售后保修范围。</div>
                        </div>
                        <div class="after-block">
                            <div class="after-title">三、非保修范围</div>
                            <div class="aftet-text">1、人为疏忽致使面料严重刺破、破损、烧伤；</div>
                            <div class="aftet-text">2、使用不当致使包边条破裂、硬质外壳撞击严重凹陷、严重破裂；</div>
                            <div class="aftet-text">3、自然破旧、老化；</div>
                            <div class="aftet-text">4、暴露于极端温度、溶剂、酸、水等环境中而造成的损坏；</div>
                            <div class="aftet-text">5、维修费用超过产品本身的价值（比如箱面破裂、拉杆箱拉链损毁等情况）。</div>
                        </div>
                        <div class="after-block">
                            <div class="after-title">四、售后服务</div>
                            <div class="aftet-text">1、退换货：产品自售出日起 7 日内，且在保修范围以内，消费者凭购买收据原件可选择退货、换货或修理；</div>
                            <div class="aftet-text">2、免费维修：在产品承诺保修期内，且在保修范围以内，消费者凭有效保修凭证享受免费维修服务；</div>
                            <div class="aftet-text">3、付费维修：消费者无有效保修凭证，或产品故障属于非保修范围，或产品超过保修时限，公司仅酌收材料工本费用。</div>
                        </div>

                    </div>

                </el-collapse>

                <el-collapse v-model="activeName" accordion :style="show3">
                    <div class="questions">
                        <div class="concat-item" style="margin-top:150px">
                            <div>品牌合作 / 跨界联名</div>
                            <div>juncy.zeng@level8cases.com </div>
                        </div>
                        <div class="concat-cricle" >
                        </div>
                        <div class="concat-item"style="margin-top:150px">
                            <div>媒体联络</div>
                            <div>root.li@level8cases.com </div>
                        </div>
                        <div class="concat-cricle"style="margin-top:150px">
                        </div>
                        <div class="concat-item">
                            <div>企业团购</div>
                            <div>root.li@level8cases.com</div>
                        </div>
                    </div>
                </el-collapse>
            </div>
        </el-main>


        <el-footer>
            <div id="footer" style="height: auto;margin-top: 80px">
                <div id="footer-content">
                    <div id="footer-content-left">
                        <div id="footer-search" style="">
                            <input placeholder="搜索关键词">
                            <div>
                                <img src="./images/face-right-white.png">
                            </div>
                        </div>
                        <div id="footer-follow">
                            <span>FOLLOW US</span>

                            <a target="_blank" href=" https://weibo.com/level8official"><img
                                    src="./images/footer_icon_1.png"></a>
                            <!-- <a target="_blank" href=""><img src="/static/images/footer_icon_2.png"/></a> -->
                            <a target="_blank" href="https://www.instagram.com/level8_official/"><img
                                    src="./images/footer_icon_3.png"></a>
                            <a target="_blank" href="https://www.facebook.com/pg/Level8Group/shopify"><img
                                    src="./images/footer_icon_4.png"></a>
                            <a target="_blank"
                               href="https://space.bilibili.com/349904854?from=search&amp;seid=16496169767152971469&amp;spm_id_from=333.337.0.0"><img
                                    src="./images/footer_icon_5.png"></a>
                            <a target="_blank"
                               href="https://www.xiaohongshu.com/vipUser/profile/5c982e85000000001000bbd4?xhsshare=CopyLink&amp;appuid=5c0544836b58b714620b8753&amp;apptime=1636529051"><img
                                    src="./images/footer_icon_6.png"></a>
                        </div>
                    </div>
                    <div id="footer-content-right">
                        <div class="footer-code-item" style="border-right: 1px dashed #000;">
                            <div class="footer-code">
                                <img src="./images/footer_code1.png">
                            </div>
                            <div>绑定产品</div>
                        </div>
                        <div class="footer-code-item " style="border-right: 1px dashed #000;">
                            <div class="footer-code">
                                <img src="./images/footer_code2.png">
                            </div>
                            <div>关注公众号</div>
                        </div>
                        <div class="footer-code-item paddingR0">
                            <div class="footer-code">
                                <img src="./images/footer_code3.png">
                            </div>
                            <div>关注抖音</div>
                        </div>
                    </div>
                </div>
                <div id="footer-bottom">
                    <div id="footer-bottom-right">
                        <div style="margin-right: 20px;">© Copyright Level 8 2017</div>
                        <div>level8@level8cases.com</div>
                    </div>
                </div>
                <div class="gmt-footer-bottom">
                    <!-- class="container" -->
                    <div>版权所有 ©2021 &nbsp;&nbsp;公司名：厦门远行客智能科技有限公司
                        <a style="margin-left:10px;color: #000;" href="http://beian.miit.gov.cn">闽ICP备20000451号</a>
                    </div>
                </div>
            </div>
        </el-footer>
    </el-container>
    <div class="line"></div>
</div>
<!--*************************************尾部*************************-->
</div>
</body>
</html>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    let v = new Vue({
        el: "body div",
        data: function () {
            return {
                visible: false,
                activeIndex: '1',
                activeIndex2: '1',

                activeName: '',
                equities:'./images/service_icon1_active.png',
                grade:'./images/service_icon2.png',
                demotion:'./images/service_icon3.png',
                show1:'display: block',
                show2:'display: none',
                show3:'display: none'
            }

        },


        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClick(tab, event) {
                console.log(tab, event);

            },

            vipclick(id){
                if(id==1){
                    v.equities='./images/service_icon1_active.png'
                    v.grade='./images/service_icon2.png'
                    v.demotion='./images/service_icon3.png'
                    v.show1='display: block'
                    v.show2='display: none'
                    v.show3='display: none'
                }if(id==2){
                    v.equities='./images/service_icon1.png'
                    v.grade='./images/service_icon2_active.png'
                    v.demotion='./images/service_icon3.png'
                    v.show1='display: none'
                    v.show2='display: block'
                    v.show3='display: none'
                }if(id==3){
                    v.equities='./images/service_icon1.png'
                    v.grade='./images/service_icon2.png'
                    v.demotion='./images/service_icon3_active.png'
                    v.show1='display: none'
                    v.show2='display: none'
                    v.show3='display: block'
                }
            }
        },


    })

</script>
